/**
* @name 表单
* @description:
* @param
* @return
*/
<template>
	<view class="registerForm">
		<!-- 名称 -->
		<view class="form-title-name">
			<!-- <view>味世团餐</view> -->
			<u-image class="logo" width="160rpx" height="160rpx" src="@/static/logo.png"></u-image>
		</view>
		<form>
			<view class="uni-form-item">
				
				<!-- 昵称	 -->
				<input 
					class="uni-input" 
					name="input" 
					placeholder="请输入昵称" 
					type="text" 
					v-model="form.name" />
				
				<!-- 手机号模块 -->
				<view class="box1">
					<input 
						class="uni-input" 
						name="input" 
						placeholder="请输入手机号" 
						type="text" 
						v-model="form.phone" />
						
					<button 
						open-type="getPhoneNumber" 
						@getphonenumber="getPhoneNumber" 
						:loading="isLoading" 
						class="pBtn">获取</button>
				</view>
				
				<!-- 团购码 -->
				<input 
					class="uni-input" 
					name="input" 
					placeholder="请输入团购码" 
					type="text" 
					v-model="form.code" />
				
				<!-- 提交按钮 -->
				<button 
					type="default" 
					class="btn"
					@click="register" 
					:loading="submitLoading">确定</button>
				<view class="form-bottom-text">—— 专业团餐配送 ——</view>
			</view>
		</form>
		<!-- 底部文字 -->
		<!-- <view class="bottom-text">
			<view class="text">—— 味世团餐 ——</view>
		</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import * as api from "@/api/apiList/register.js"
	
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapMutations
	} = createNamespacedHelpers('userModule')
	
	export default{
		props:{
			userMassage:{//用户数据
				type:Object
			},
			sessionKey:{
				type:String,
				required:true
			},
			openid:{
				type:String,
				required:true
			}
		},
		data(){
			return{
				form:{//表单数据
					code:"",//团购码
					name:"",//昵称
					phone:""//电话
				},
				isLoading:false,//获取电话按钮loading
				submitLoading: false,//提交按钮loading
			}
		},
		watch:{
			userMassage:{//监听用户数据获取昵称
				handler(value){
					if(value){
						this.form.name = value.userInfo.nickName
					}
				},
				immediate:true,
				deep:true
			}
		},
		methods:{
			...mapMutations(["GET_TOKEN"]),
			async API_getWxPhoneInfo(sessionKey, signature, rawData, encryptedData, iv) { //获取手机接口
				let result = {
					param: {
						sessionKey,
						signature,
						rawData,
						encryptedData,
						iv
					}
				}
				return await api.getWxPhoneInfo(result)
			},
			async API_register(name, phone, pic, code, wxid) { //注册接口
				let result = {
					data: {
						name, //昵称
						phone, //电话
						pic, //头像
						code, //团购码
						wxid //openid
					}
				}
				return await api.register(result)
			},
			async getPhoneNumber(e) { //获取手机号
				this.isLoading = true
				let userMassage = this.userMassage
				let phoneRes = await this.API_getWxPhoneInfo(this.sessionKey, userMassage.signature, userMassage.rawData, e.detail.encryptedData,e.detail.iv) //再传递给获取手机接口
				this.isLoading = false
				this.form.phone = phoneRes.data.data.phoneNumber
			},
			async API_login(wxid) { //登录接口
				let result = {
					param: {
						wxid //openid
					}
				}
				return await api.login(result)
			},
			async register() { //注册
				let res = await this.API_register(this.form.name, this.form.phone, this.userMassage.userInfo.avatarUrl, this.form.code, this.openid)
				
				if (res.data.code === 1000) { //第一次注册
					let loginRes = await this.API_login(this.openid) //登录
					if(loginRes.data.code === 1000){
						this.GET_TOKEN(loginRes.data.data) //存token
						this.isRegiser = true
						this.$refs.uToast.show({ //提示
							title: res.data.msg,
							type: 'success'
						})
						
						uni.navigateTo({
							url: '/pages/waitting/waitting'
						});
					}
					
				} else {
					this.$refs.uToast.show({
						title: res.data.msg,
						type: 'error'
					})
					console.log(res)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.registerForm {
		width: 100%;
		height: 100%;
		padding: 15% 10% 60% 10%;
		background-color: rgba($color: #ffffff, $alpha: 0.3);

		.uni-form-item {
			padding: 0 60rpx;
			border-radius: 17px;
			
			.uni-input {
				border: 1px solid #333333;
				color: #333333;
				border-radius: 4px;
				padding: 15rpx 20rpx;
				margin-bottom: 30rpx;
			}

			.box1 {
				width: 100%;
				display: flex;
				margin-bottom: 30rpx;

				.pBtn {
					width: 25%;
					font-size: 24rpx;
					text-align: center;
					padding: 6rpx 0;
					background-color: #f43a3d;
					color: #ffdb36;
					margin: 0 0 30rpx 20rpx;
				}
			}

			.btn {
				width: 100%;
				text-align: center;
				font-size: 36rpx;
				background-color: #f43a3d;
				color: #ffdb36;
				padding: 3rpx 0;
			}
			
			.form-bottom-text{
				width: 100%;
				margin-top: 55%;
				font-size: 24rpx;
				text-align: center;
			}
		}
	}
	.form-title-name{
		display: flex;
		justify-content: center;
		margin: 40rpx 0;
		.logo{
			border-radius: 25rpx;
			overflow: hidden;
		}
	}
</style>
